<link rel="stylesheet" href="{{ "/search/css/cb-search.css" | prepend: site.baseurl }}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<header id="top">
    <div class="wrapper">
        <a href="{{ site.baseurl }}/" class="brand">{{ site.title }}</a>
        <small>{{site.brief-intro}}</small>
        <div class="search">
	        <i class="material-icons search-icon search-start">search</i>
	        <input type="text" class="search-input" placeholder="Searching..." />
	        <i class="material-icons search-icon search-clear">clear</i>
	        <div class="search-results"></div>
	    </div>
        <button id="headerMenu" class="menu"><i class="fa fa-bars"></i></button>
        <nav id="headerNav">
            <ul>
                <li>
                    {% if page.url == '/' %}
                    <a class="active" href="{{site.baseurl}}/">
                        {% else %}
                    <a href="{{site.baseurl}}/">
                    {% endif %}
                        <i class="fa fa-home"></i>Home
                    </a>
                </li>

                {% for my_page in site.pages %}
                    {% if my_page.type == 'page' %}
                    <li>
                        {% if my_page.url == page.url %}
                        <a class="active" href="{{ my_page.url | prepend: site.baseurl }}">
                            {% else %}
                        <a href="{{ my_page.url | prepend: site.baseurl }}">
                        {% endif %}
                            <i class="fa fa-{{my_page.icon}}"></i>{{ my_page.title }}
                        </a>
                    </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </nav>
    </div>
</header>
<script src="{{ "/search/js/cb-search.js" | prepend: site.baseurl }}"></script>
